Tegevusetuse tuvastamise API: süvaülevaade Frontend'i kasutaja aktiivsuse jälgimisest

Pidevalt arenevas veebiarenduse maastikus on uueks piiriks rakenduste loomine, mis ei ole mitte ainult funktsionaalsed, vaid ka intelligentsed ja kontekstiteadlikud. Aastaid on arendajad seisnud silmitsi põhimõttelise väljakutsega: kuidas saab veebirakendus teada, kas kasutaja on tõesti oma seadme juures ja sellega suhtleb, mitte ainult konkreetse brauseri vahekaardiga? Traditsioonilised meetodid, nagu hiireliigutuste või klaviatuurivajutuste jälgimine lehel, on piiratud. Nad ei suuda öelda, kas kasutaja on lülitunud teisele rakendusele, lukustanud oma ekraani või lihtsalt arvutist eemaldunud. See on probleem, mida tegevusetuse tuvastamise API püüab lahendada.

See võimas, kuid lihtne brauseri API pakub veebirakendustele usaldusväärset viisi teadete saamiseks, kui kasutaja muutub süsteemi tasandil tegevusetuks. See avab hulgaliselt võimalusi tõhusamate, reageerivamate ja kasutajasõbralikumate kogemuste loomiseks. Alates ressursside säästmisest kuni kasutaja staatuse reaalajas värskendamiseni on tegevusetuse tuvastamise API oluline samm edasi veebirakenduste nutikamaks muutmisel.

Selles põhjalikus juhendis uurime tegevusetuse tuvastamise API kõiki tahke. Käsitleme, mis see on, miks see on vanemate tehnikatega võrreldes mängumuutev, selle kõige köitvamaid kasutusjuhtumeid ja anname samm-sammulise rakendamisjuhendi praktiliste koodinäidetega. Olulise tähtsusega on ka see, et süveneme kriitilistesse turvalisuse ja privaatsuse kaalutlustesse, tagades, et saate seda API-d kasutada vastutustundlikult ja eetiliselt ülemaailmse publiku jaoks.

Mis on tegevusetuse tuvastamise API?

Tegevusetuse tuvastamise API on veebistandard, mis võimaldab veebilehel kasutaja selgesõnalisel loal tuvastada, millal kasutaja on oma seadmega tegevusetu. See ei puuduta ainult suhtluse puudumist teie konkreetse veebisaidiga; see puudutab kogu süsteemi hõlmavat tegevusetust. See hõlmab sisendi puudumist hiirelt, klaviatuurilt või puuteekraanilt, samuti sündmusi nagu ekraanisäästja aktiveerumine või ekraani lukustumine.

Kaasaegne lähenemine kohaloleku tuvastamisele

Enne tegevusetuse tuvastamise API-d pidid arendajad lootma nutikatele, kuid lõppkokkuvõttes vigastele lahendustele. Võrdleme vanu ja uusi meetodeid:

• Vana viis (heuristika): Arendajad seadistasid tavaliselt sündmuste kuulajad `mousemove`, `keydown`, `scroll` ja muude kasutaja interaktsiooni sündmuste jaoks. Taimer (`setTimeout`) lähtestati iga kord, kui mõni neist sündmustest käivitus. Kui taimer lõppes ilma lähtestamata, eeldas rakendus, et kasutaja on tegevusetu. Piirang: See jälgib tegevust ainult ühe brauseri vahekaardi piires. Kui kasutaja töötab aktiivselt teises rakenduses (nt tekstitöötlusprogrammis või koodiredaktoris), märgiks esimene rakendus ta ekslikult tegevusetuks.
• Lehe nähtavuse API (Page Visibility API): See API annab teada, kas teie vahekaart on hetkel nähtav või peidetud. See on kasulik, kuid ei räägi siiski kogu lugu. Kasutaja võib hoida teie vahekaarti nähtaval, kuid olla oma seadmest täielikult eemal. Vastupidi, ta võib hoida teie vahekaarti peidetuna, samal ajal kui ta oma seadet aktiivselt kasutab.
• Uus viis (tegevusetuse tuvastamise API): See API küsib operatsioonisüsteemilt otse kasutaja tegevusetuse olekut. See annab lõpliku signaali, mis on sõltumatu sellest, milline rakendus või brauseri vahekaart on hetkel fookuses. See on palju täpsem ja usaldusväärsem meetod tõelise kasutaja kohaloleku kindlaksmääramiseks.

Põhiterminoloogia selgitus

API mõistmiseks on oluline tunda selle põhimõisteid:

• Kasutaja tegevusetuse olek: See viitab kasutaja suhtlusele seadmega. Olek võib olla `active` (aktiivne - kasutaja suhtleb seadmega) või `idle` (tegevusetu - kasutaja pole seadmega teatud aja jooksul suhelnud).
• Ekraani tegevusetuse olek: See viitab ekraani olekule. Olek võib olla `unlocked` (lukustamata) või `locked` (lukustatud). Lukustatud olek käivitatakse ekraanisäästja, lukustuskuva või sarnaste operatsioonisüsteemi funktsioonide abil.
• Lävi (Threshold): See on millisekundites määratud ajavahemik, mis peab mööduma ilma kasutaja interaktsioonita, enne kui kasutajat peetakse tegevusetuks (`idle`). API määrab kasutaja privaatsuse kaitseks minimaalseks läveks 60 000 millisekundit (1 minut).
• `IdleDetector` objekt: See on peamine liides JavaScriptis, mida kasutate API-ga suhtlemiseks. Kasutate seda loa küsimiseks, jälgimise alustamiseks ja muudatuste kuulamiseks.
• Luba (Permission): Selle teabe tundliku olemuse tõttu nõuab API enne kasutamist kasutajalt selgesõnalist luba brauseri viiba kaudu. See on kriitiline sisseehitatud privaatsuse funktsioon (privacy-by-design).

Miks me vajame tegevusetuse tuvastamise API-d? Peamised kasutusjuhud

Võime täpselt tuvastada kasutaja tegevusetust avab hulga võimsaid funktsioone, mis võivad täiustada rakendusi erinevates valdkondades. Siin on mõned kõige mõjukamad kasutusjuhud ülemaailmsele publikule.

1. Koostöö- ja suhtlusrakenduste täiustamine

Rakenduste jaoks nagu ettevõtte vestlusprogrammid, projektijuhtimise tööriistad ja sotsiaalvõrgustikud on kasutaja tegeliku staatuse teadmine hindamatu väärtusega. Globaalne meeskond võib hõlmata mitut ajavööndit ja täpne kohalolekuteave aitab vahemaid ületada.

• Automaatsed olekuvärskendused: Suhtlusrakendus (nagu Microsoft Teams, Slack või Google Chat) saab automaatselt seada kasutaja staatuse "Eemal" või "Tegevusetu", kui ta oma arvutist eemaldub. See annab kolleegidele täpset teavet kohaloleku kohta, aidates neil otsustada, kas oodata kohest vastust. See on usaldusväärsem kui käsitsi seatud staatus, mida inimesed sageli unustavad uuendada.
• Nutikas teavituste haldamine: Kui kasutaja on tegevusetu, saab veebirakendus valida mittekriitiliste töölauateavituste edasilükkamise ja saata selle asemel kokkuvõtva e-kirja või mobiilse tõuketeate. See väldib hüpikakende tulva järelevalveta masinas ja edastab teabe sobivama kanali kaudu.

2. Ressursikasutuse ja jõudluse optimeerimine

Kaasaegsed veebirakendused võivad olla ressursimahukad, tarbides märkimisväärselt protsessorit, mälu ja võrgu ribalaiust. Nende ressursside arukas haldamine võib viia parema jõudluse, pikema aku kestvuse ja vähenenud keskkonnamõjuni.

• Intensiivsete arvutuste peatamine: Veebipõhine rakendus andmeanalüüsiks, 3D-renderdamiseks või videotöötluseks võib peatada raske taustatöötluse, kui kasutaja on tegevusetu. Kui kasutaja naaseb, saab protsessi sujuvalt jätkata. See vabastab protsessori tsükleid teiste rakenduste jaoks ja säästab mobiilseadmete akut.
• Võrgupäringute piiramine: Sotsiaalmeedia voog või uudiste koondaja, mis pidevalt uut sisu otsib, võib need päringud peatada, kui kasutaja on eemal. Pole vaja hankida andmeid, mida keegi ei näe. See säästab nii kliendipoolseid ressursse kui ka serveripoolset ribalaiust.

3. Kasutajakogemuse (UX) ja turvalisuse parandamine

Kontekstiteadlik rakendus tundub kasutajale intuitiivsem ja turvalisem. Tegevusetuse tuvastamise API aitab kohandada kasutajakogemust vastavalt nende kohalolekule.

• Automaatne väljalogimine turvalisuse tagamiseks: Rakenduste puhul, mis käsitlevad tundlikke andmeid, nagu internetipangandus, ettevõtte sisevõrgud või tervishoiuportaalid, on kasutaja automaatne väljalogimine pärast süsteemiülest tegevusetuse perioodi kriitiline turvaelement. See hoiab ära volitamata juurdepääsu järelevalveta arvutile avalikus või jagatud ruumis.
• Rakenduse oleku lähtestamine: Avalikus kioskis või jagatud arvutikeskkonnas saab rakendus kasutada tegevusetuse signaali, et lähtestada end algolekusse. See tagab, et järgmine kasutaja alustab puhtalt lehelt ega näe eelmise kasutaja teavet.

4. Nutikam analüütika ja kasutajakäitumise jälgimine

Tootejuhtidele ja analüütikutele on kasutajate kaasamise mõistmine võtmetähtsusega. Tegevusetuse tuvastamise API pakub nüansseeritumat vaadet kasutajate tegevusele.

• Täpne seansi kestus: Selle asemel, et mõõta, kui kaua vahekaart on avatud, saate mõõta tegelikku aktiivset aega, mille kasutaja teie rakendusega veedab. See eristus "vahekaardi avatud aja" ja "aktiivse kaasamise aja" vahel võib viia palju täpsemate mõõdikute ja paremini informeeritud tooteotsusteni.
• Eetiline märkus: On ülioluline olla selle andmete kogumise osas oma privaatsuspoliitikas läbipaistev. Seda API-d tuleks kasutada tootekogemuse parandamiseks, mitte invasiivseks töötajate jälgimiseks või muudeks karistusmeetmeteks. Kasutaja privaatsuse austamine on esmatähtis.

Kuidas rakendada tegevusetuse tuvastamise API-d: praktiline juhend

Tegevusetuse tuvastamise API rakendamine on lihtne. See järgib kaasaegset, lubaduspõhist (promise-based) mustrit, mis on paljudele JavaScripti arendajatele tuttav. Vaatame protsessi samm-sammult läbi.

Samm 1: Funktsiooni tuvastamine

Enne kui midagi muud teete, peate kontrollima, kas kasutaja brauser toetab seda API-d. See on progressiivse täiustamise põhiprintsiip ja tagab, et teie kood ei lähe katki vanemates või toetamata brauserites.

            
if ('IdleDetector' in window) {
  // Tegevusetuse tuvastamise API on toetatud.
  console.log('Idle Detection API is available.');
} else {
  // Tegevusetuse tuvastamise API ei ole toetatud.
  console.log('Idle Detection API is not supported in this browser.');
}

            

              
                Copy
              
            
          

Samm 2: Loa küsimine

API nõuab kasutaja selgesõnalist luba. Loa küsimine peab olema käivitatud kasutaja tegevusega, näiteks nupuvajutusega. Te ei saa seda automaatselt lehe laadimisel küsida. See on turvameede kuritarvitamise vältimiseks.

`IdleDetector.requestPermission()` meetod tagastab lubaduse (promise), mis laheneb kas väärtusega `'granted'` või `'denied'`.

            
const requestIdlePermission = async () => {
  const permissionState = await IdleDetector.requestPermission();
  if (permissionState === 'granted') {
    console.log('Idle detection permission granted.');
    // Luba antud, saate nüüd detektori käivitada.
  } else {
    console.error('Idle detection permission denied.');
    // Luba keelatud, käsitlege seda sujuvalt.
  }
};

// Kutsuksite selle funktsiooni välja sündmuse kuulajast, näiteks:
document.getElementById('start-button').addEventListener('click', requestIdlePermission);

            

              
                Copy
              
            
          

Samm 3: IdleDetector'i lähtestamine

Kui teil on luba, saate luua uue `IdleDetector` eksemplari. See objekt on keskne punkt tuvastamise alustamiseks ja muudatuste kuulamiseks.

            
// See tuleks teha pärast loa andmist.
const idleDetector = new IdleDetector();

            

              
                Copy
              
            
          

Samm 4: Tuvastamise alustamine

Jälgimise alustamiseks kutsute oma `idleDetector` eksemplaril välja `start()` meetodi. See meetod võtab vastu valikute objekti, kus peate määrama `threshold` väärtuse millisekundites. Pidage meeles, et minimaalne lubatud väärtus on `60000` (60 sekundit).

Saate edastada `start()` meetodile ka `AbortSignal`'i, mis võimaldab teil detektori igal ajal `AbortController`'i abil peatada. See on parim tava asünkroonsete operatsioonide haldamiseks.

            
const controller = new AbortController();
const signal = controller.signal;

await idleDetector.start({
  threshold: 60000, // minimaalselt 60 sekundit
  signal,
});

console.log('IdleDetector has started.');

// Hiljem peatamiseks:
// controller.abort();
// console.log('IdleDetector has been stopped.');

            

              
                Copy
              
            
          

Samm 5: Oleku muudatuste käsitlemine

`idleDetector` objekt on `EventTarget`. Saate kuulata `change` sündmust, et saada teada, kui kasutaja tegevusetuse olek või ekraani olek muutub. Sündmuse objekt annab teile uued olekud.

            
idleDetector.addEventListener('change', () => {
  const userState = idleDetector.userState;
  const screenState = idleDetector.screenState;

  console.log(`Idle state changed: User is ${userState}, Screen is ${screenState}`);

  // Näide: Värskenda kasutajaliidest
  if (userState === 'idle') {
    document.getElementById('status').textContent = 'Olek: Kasutaja on tegevusetu.';
  } else {
    document.getElementById('status').textContent = 'Olek: Kasutaja on aktiivne.';
  }
});

            

              
                Copy
              
            
          

Kõik kokku: täielik koodinäide

Siin on täielik, hästi kommenteeritud näide, mis ühendab kõik sammud funktsionaalseks kooditükiks. Saate seda kasutada oma rakenduse lähtepunktina.

            
<!-- HTML näite jaoks -->
<div>
  <h3>Tegevusetuse tuvastamise API demo</h3>
  <p>See demo vajab teie luba, et tuvastada, millal olete tegevusetu.</p>
  <button id="startButton">Alusta jälgimist</button>
  <button id="stopButton" disabled>Lõpeta jälgimine</button>
  <p id="status">Olek: Jälgimist ei toimu.</p>
  <p id="permissionStatus">Luba: Küsitud ei ole.</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const startButton = document.getElementById('startButton');
  const stopButton = document.getElementById('stopButton');
  const statusDiv = document.getElementById('status');
  const permissionDiv = document.getElementById('permissionStatus');

  let idleDetector = null;
  let controller = null;

  if (!('IdleDetector' in window)) {
    statusDiv.textContent = 'Viga: Tegevusetuse tuvastamise API ei ole toetatud.';
    startButton.disabled = true;
    return;
  }

  const startMonitoring = async () => {
    // Kõigepealt küsi luba.
    const permissionState = await IdleDetector.requestPermission();
    permissionDiv.textContent = `Luba: ${permissionState}`;

    if (permissionState !== 'granted') {
      statusDiv.textContent = 'Olek: Luba keelatud.';
      return;
    }

    try {
      idleDetector = new IdleDetector();
      controller = new AbortController();

      idleDetector.addEventListener('change', () => {
        const userState = idleDetector.userState;
        const screenState = idleDetector.screenState;
        statusDiv.textContent = `Olek: Kasutaja on ${userState}, ekraan on ${screenState}.`;
      });

      await idleDetector.start({
        threshold: 60000, // 1 minut
        signal: controller.signal,
      });

      statusDiv.textContent = 'Olek: Jälgimine alustatud.';
      startButton.disabled = true;
      stopButton.disabled = false;

    } catch (error) {
      console.error(error.name, error.message);
      statusDiv.textContent = `Viga: ${error.message}`;
    }
  };

  const stopMonitoring = () => {
    if (controller) {
      controller.abort();
      controller = null;
      idleDetector = null;
      statusDiv.textContent = 'Olek: Jälgimine peatatud.';
      startButton.disabled = false;
      stopButton.disabled = true;
    }
  };

  startButton.addEventListener('click', startMonitoring);
  stopButton.addEventListener('click', stopMonitoring);
});
</script>

            

              
                Copy
              
            
          

Turvalisus ja privaatsus: ülioluline kaalutlus

Suure võimuga kaasneb suur vastutus. Tegevusetuse tuvastamise API annab juurdepääsu potentsiaalselt tundlikule teabele kasutaja käitumise kohta. Seetõttu on see loodud tugeva fookusega privaatsusele ja turvalisusele. Arendajana on teie kohus seda eetiliselt kasutada.

Loa mudel: kasutaja kontrollib olukorda

Kõige olulisem kaitsemeede on loa mudel. API on täielikult kättesaamatu, kuni kasutaja annab selgesõnalise loa selge brauseri viiba kaudu. See tagab, et kasutajad on sellest jälgimisest teadlikud ja nõustuvad sellega. Arendajana peaksite alati austama kasutaja valikut, kui ta loa keelab, ja tagama, et teie rakendus töötab korrektselt ka ilma selleta.

Sõrmejälgede võtmise ja jälgimise ennetamine

API on tahtlikult loodud "jämedakoeliseks", et vältida pahatahtlikke kasutusjuhtumeid, nagu digitaalne sõrmejälgede võtmine (kasutajate tuvastamine unikaalsete käitumismustrite põhjal) või peeneteraline jälgimine.

• Minimaalne lävi: Nõue vähemalt 60-sekundilise läve kohta takistab arendajatel kasutaja staatust kõrge sagedusega küsida. See muudab kasutaja tegevuse üksikasjaliku ajajoone koostamise keeruliseks.
• Piiratud olekud: API teatab ainult laiaulatuslikest olekutest (`active`/`idle`, `locked`/`unlocked`). See ei paku taimerit selle kohta, kui kaua kasutaja on tegevusetu olnud, ega mingeid üksikasju selle kohta, milliseid teisi rakendusi ta kasutab.

Eetilise rakendamise parimad tavad

Et luua usaldust oma kasutajatega ja järgida ülemaailmseid privaatsusstandardeid nagu GDPR, CCPA ja teised, järgige neid parimaid tavasid:

• Olge läbipaistev: Selgitage oma kasutajatele selgelt, miks te seda luba küsite. Kasutage selget ja lihtsat keelt. Näiteks: "Luba sellel saidil tuvastada, kui olete eemal? See aitab meil teie tööd salvestada ja teie staatust kolleegide jaoks värskendada."
• Küsige luba kontekstis: Küsige luba ainult siis, kui kasutaja proovib aktiveerida funktsiooni, mis seda nõuab. Ärge küsige seda lehe laadimisel, kuna see võib olla murettekitav ja viia kohese keeldumiseni.
• Pakkuge väljalülitamise võimalust: Andke kasutajatele selge ja lihtne viis funktsiooni keelamiseks ja loa tühistamiseks teie rakenduse seadetes.
• Vältige karistavaid tegevusi: Ärge kunagi kasutage seda API-d töötajate tootlikkuse jälgimiseks, töötundide arvestamiseks tasu maksmiseks ega mis tahes muuks järelevalve vormiks. See on tehnoloogia ebaeetiline kasutamine, mis õõnestab usaldust ja millel võivad olla õiguslikud tagajärjed paljudes maailma osades. API on mõeldud kasutajakogemuse ja tõhususe parandamiseks, mitte inimeste jälgimiseks.

Brauseri tugi ja tulevik

Nagu iga uue veebi API puhul, on brauseri tugi kasutuselevõtuks oluline kaalutlus.

Praegune brauseri ühilduvus

Tegevusetuse tuvastamise API on praegu toetatud Chromium-põhistes brauserites, mis hõlmavad:

• Google Chrome (versioon 84 ja uuemad)
• Microsoft Edge (versioon 84 ja uuemad)
• Opera (versioon 70 ja uuemad)

Tugi teistes brauserites nagu Mozilla Firefox ja Apple'i Safari pole veel saadaval. Enne selle funktsiooni tootmiskeskkonnas rakendamist on oluline kontrollida ressursse nagu Can I Use... või MDN Web Docs, et saada kõige ajakohasemat teavet ühilduvuse kohta.

Standardimisprotsess

API sai alguse Web Platform Incubator Community Group'ist (WICG), mis on osa W3C-st, kus pakutakse välja ja arendatakse uusi veebiplatvormi funktsioone. Kuigi seda peetakse endiselt eksperimentaalseks tehnoloogiaks, on selle rakendamine suuremates brauserites tugev märk selle potentsiaalist saada tulevikus täieõiguslikuks veebistandardiks.

Alternatiivid ja tagavaralahendused

Arvestades praegust brauseri toe seisu, vajate tagavarastrateegiat, et pakkuda kõigile kasutajatele ühtlast (või vähemalt funktsionaalset) kogemust. Saate käitumise ligikaudseks jäljendamiseks kombineerida vanemaid tehnikaid.

Lehe nähtavuse API (Page Visibility API)

See API annab teada, kas teie leht on aktiivne vahekaart. See on suurepärane esimese rea tagavaralahendus. Kui vahekaart pole nähtav (`document.visibilityState === 'hidden'`), saate ressursimahukad ülesanded peatada.

Traditsioonilised aktiivsuse kuulajad

Brauserite jaoks, mis toetavad lehe nähtavuse API-d, saate seda kombineerida traditsioonilise meetodiga, mis kuulab sündmusi nagu `mousemove`, `keydown` jne, koos ajalõpuga. Sel viisil eeldate, et kasutaja on tegevusetu ainult siis, kui teie vahekaart on nähtav, kuid selle sees pole teatud aja jooksul toimunud mingit interaktsiooni.

Kombineeritud tagavarastrateegia

Siin on loogiline lähenemine:

1. Kontrollige tegevusetuse tuvastamise API olemasolu: Kui `IdleDetector` on olemas, kasutage seda. See on kõige usaldusväärsem meetod.
2. Tagavaralahendusena kasutage lehe nähtavuse API-d: Kui ei, kontrollige lehe nähtavuse API olemasolu. Kasutage selle `visibilitychange` sündmust tegevuste peatamiseks/jätkamiseks, kui vahekaart on peidetud/nähtav.
3. Lisage aktiivsuse kuulajad: Viimase kihina, kui vahekaart on nähtav, kasutage traditsioonilisi sündmuste kuulamisi ja taimerit, et tuvastada tegevusetust vahekaardi sees.

See progressiivse täiustamise lähenemine tagab, et kasutate parimat saadaolevat tehnoloogiat, pakkudes samal ajal mõistlikku kogemust kõigi platvormide kasutajatele.

Kokkuvõte: kohalolekuteadlikkuse jõud

Tegevusetuse tuvastamise API tähistab olulist arengut selles, kuidas veebirakendused saavad kasutajakäitumist mõista ja sellele reageerida. Pakkudes usaldusväärset ja privaatsusele keskendunud mehhanismi süsteemiülese tegevusetuse tuvastamiseks, annab see arendajatele võimaluse luua rakendusi, mis on tõhusamad, turvalisemad ja kontekstiteadlikumad.

Alates teavituste arukast haldamisest globaalsetes koostöövahendites kuni aku säästmiseni raskete arvutuste peatamise kaudu on potentsiaalsed rakendused laiaulatuslikud ja mõjukad. See võimaldab meil ületada ühe brauseri vahekaardi piirangud ja luua veebikogemusi, mis tunduvad paremini integreeritud kasutaja üldise seadmekasutusega.

Seda võimu tuleb aga kasutada ettevaatlikult. Globaalsele publikule arendajatena on meie pühendumus kasutajate privaatsusele ja eetilisele disainile vaieldamatu. Olles läbipaistvad, küsides luba kontekstis ja lükates tagasi igasuguse kasutuse järelevalveks, saame rakendada tegevusetuse tuvastamise API eeliseid, et ehitada kõigi jaoks targem ja austavam veeb. Veebi tulevik ei seisne ainult selles, mida rakendused suudavad teha, vaid ka selles, kui arukalt ja arvestavalt nad seda teevad.